//尝试发送i请求  
axios.get('/dashboard').then(({data:res})=>{
  // console.log(res)
  let {groupData,overview,provinceData, salaryData,year}=res.data
  // console.log(groupData)
  for(let key in overview){
    document.querySelector(`[name=${key}]`).innerHTML=overview[key]

  }
   lineChart(year)//折线图
   classSalaryChart(salaryData)//饼图
   sexSalaryChart(salaryData)//柱状图
   mapChart(provinceData) //饼图
   groupSalaryChart(groupData)//地图
})


const lineChart = (data) => {
  // console.log(data)
    const myChart = echarts.init(document.querySelector('#line'))
    const option = {
      //标题配置
       title:{
         text:'2022全学科薪资走势',
         top:15,
         left:10,
         textStyle:{
          fontSize:16

         }
       },
        xAxis: {
          //x轴上的文字
          axisLabel:{
            color :'#999'
          },
          //轴线
          axisLine:{
            lineStyle:{
              color:'#999',
              type:'dashed'
            }
          },
            type: 'category',
            // data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data:data.map(item=>{
              return item.month
            })
          },
          yAxis: {
            type: 'value',
            splitLine:{
              lineStyle:{
                type:'dashed'
              }
            },
          },
          //鼠标一如提示
          tooltip:{
            trigger:'axis'
          },
          grid:{
            top:'20%'
          },
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: '#5D75F0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
          series: [
            {
              // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
              data:data.map(item=>item.salary),
              type: 'line',
              smooth: true,
              //线条样式
              lineStyle:{
                width:6
              },
              symbolSize: 10, 
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#499FEE' // 0% 处的颜色
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(255,255,255,0.2)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            }
          ]
    }
    myChart.setOption(option)
  }
  

  const classSalaryChart = (data) => {
    // console.log(data)
    const myChart = echarts.init(document.querySelector('#salary'))
    let option = {
      // 标题配置
      title: {
        text: '班级薪资分布',
        left: 10, // 10 表示10px
        top: 15,
        textStyle: {
          fontSize: 16
        }
      },
      // 鼠标移入的提示
      tooltip: {
        trigger: 'item'
      },
      // 图例的设置
      legend: {
        bottom: '6%',
        left: 'center'
        // itemWidth: 12
      },
      // 颜色的设置
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      // 系列数据
      series: [
        {
          name: '班级薪资分布', // 这个名字会显示在 提示框中
          type: 'pie', // 表示饼图
          radius: ['50%', '64%'], // 内外圈的半径
          // 每一项的样式
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          // 文字标签不显示
          label: {
            show: false,
            position: 'center'
          },
          // 视觉引导线不显示
          labelLine: {
            show: false
          },
          // data: [
          //   { value: 1048, name: '1万以下' },
          //   { value: 235, name: '1万-2万' },
          //   { value: 580, name: '1.5万-2万' },
          //   { value: 484, name: '2万以上' }
          // ]
          data:data.map(item=>{
            return {value:item.b_count+item.g_count,name:item.label }
          })
        }
      ]
    }
    myChart.setOption(option)
  }
 

  function sexSalaryChart(data){
    // console.log(data)
    const myChart = echarts.init(document.querySelector('#gender'))
    const option = {
      title:{
        text: '男女生薪资分布'
      },
      tooltip:{
        trigger:'item'
      },
      series: [
        {
          name: '男生薪资分布', // 这个名字会显示在 提示框中
          type: 'pie', // 表示饼图
          radius: ['30%', '50%'], // 内外圈的半径
          center: ['50%', '30%'],
          // data: [
          //   { value: 1048, name: '1万以下' },
          //   { value: 235, name: '1万-2万' },
          //   { value: 580, name: '1.5万-2万' },
          //   { value: 484, name: '2万以上' }
          // ]
          data:data.map(item=>{
            return  {value:item.b_count,name:item.label}
          })
           
        },
        {
          name: '女生薪资分布', // 这个名字会显示在 提示框中
          type: 'pie', // 表示饼图
          radius: ['30%', '50%'], // 内外圈的半径
          center: ['50%', '70%'],
          // data: [
          //   { value: 1048, name: '1万以下' },
          //   { value: 235, name: '1万-2万' },
          //   { value: 580, name: '1.5万-2万' },
          //   { value: 484, name: '2万以上' }
          // ]
          data:data.map(item=>{
            return  {value:item.g_count,name:item.label}
          })
        }
      ]
    }
    myChart.setOption(option)
  }
  

  function mapChart(data){
    // console.log(data)
    const mapData = [
       { name: '南海诸岛', value: 0 },
       { name: '北京', value:3 },
       { name: '天津', value: 2 },
       { name: '上海', value: 4 },
       { name: '重庆', value: 1 },
       { name: '河北', value: 20 },
       { name: '河南', value: 23 },
       { name: '云南', value: 0 },
       { name: '辽宁', value: 15 },
       { name: '黑龙江', value: 12 },
       { name: '湖南', value: 2 },
       { name: '安徽', value: 5 },
       { name: '山东', value: 18 },
       { name: '新疆', value: 0 },
       { name: '江苏', value: 5 },
       { name: '浙江', value: 1 },
       { name: '江西', value: 4 },
       { name: '湖北', value: 3 },
       { name: '广西', value: 2 },
       { name: '甘肃', value: 9 },
       { name: '山西', value: 11 },
       { name: '内蒙古', value: 14 },
       { name: '陕西', value: 14 },
       { name: '吉林', value: 10 },
       { name: '福建', value: 0 },
       { name: '贵州', value: 0 },
       { name: '广东', value: 0 },
       { name: '青海', value: 3 },
       { name: '西藏', value: 0 },
       { name: '四川', value: 1 },
       { name: '宁夏', value: 1 },
       { name: '海南', value: 0 },
       { name: '台湾', value: 0 },
       { name: '香港', value: 0 },
       { name: '澳门', value: 0 }
     ];
     mapData.forEach(item=>{
      let res = data.find(v=>{
        return v.name.includes(item.name)
      })
      if(res){
        item.value=res.value
      }
     })

    let myChart= echarts.init(document.querySelector('#map'))
    let option={
     //鼠标移入提示
      tooltip:{
          formatter:'{b}:{c}位学员',//格式化b表示省的名字
          backgroundColor: 'rgba(0,0,0,0.5)' ,
          borderColor:'transparent',
          textStyle:{
            color:'#fff'
          }
        
      },
       //视觉映射组件
      visualMap:{
        type: 'continuous' ,
        min:0,
        max:15,
        inRange:{
          color:['#fff ','#0075F0']
        },
        text:[20,0],
        left:40,
        bottom:20

      },
      series:[{
        type:'map',//类型地图类型
        map:'china',//表示中国地图
        lable:{
          show: true ,
          fontSize: 10,
          color: 'rgba(0,0,0,0.7)' ,
        },
        itemStyle:{
          borderColor: 'rgba(0, 0, 0, 0.2)' ,
          areaColor: '#E0FFFF' ,
        },
        emphasis:{
          itemStyle:{
            areaColor: '#34D39A' ,
            borderWidth: 0 ,
            shadowBlur :20,
            shadowOffsetX: 0 ,
            shadowOffsetY: 0 ,
            shadowColor:' rgba(0, 0, 0, 0.5)',
          }
        },
        data:mapData
      }],
      
    }
    myChart.setOption(option)
  }
  
  const groupSalaryChart = (data) => {
    // console.log(data)
    const myChart = echarts.init(document.querySelector('#lines'))
    let option = {
      //网格
      grid:{
        left:70,
        top:30,
        right:30,
        bottom:30
      },
      xAxis: {
        axisLine:{
          lineStyle:{
            color:'#999',
            type:'dashed'
          }
        },
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        data:data[1].map(item=>{
          return item.name
        })
      },
      yAxis: {
        type: 'value',
        splitLine:{
          lineStyle:{
            type:'dashed'
          }
        },
      },
      color:[{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
        }, {
            offset: 1, color: 'transparent' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'blue' // 0% 处的颜色
        }, {
            offset: 1, color: 'transparent' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }],
      series: [
        {
          // data: [120, 200, 150, 80, 70, 110, 130],
          data:data[1].map(item=>{
              return item.salary
          }),
          type: 'bar'
        },
        {
          // data: [100, 200, 150, 80, 70, 110, 130],
          data:data[1].map(item=>{
            return item.hope_salary
        }),
          type: 'bar'
        }
      ]
    };
    myChart.setOption(option)
    //找到盒子注册事件
    document.querySelector('#btns').addEventListener('click',function(e){
      if(e.target.tagName==='BUTTON'){
        //说明点击了某按钮
        let i =e.target.innerHTML
        // console.log(e.target.innerHTML)
        //排他思想
        document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
        e.target.classList.add('btn-blue')
        //更换图表中数据
       option.xAxis.data=data[i].map(item=>item.name)
       option.series[0].data=data[i].map(item=>item.salary)
       option.series[1].data=data[i].map(item=>item.hope_salary)
       //修改配置之后，重新创建图表
      myChart.setOption(option)

      }
    })
  }
 